<template>
  <div>
    <el-row type="flex" justify="end" style="margin-top:20px">
      <el-pagination
        :current-page="parseInt(pageParams.page)"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="parseInt(pageParams.pageSize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      /></el-row>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pageParams: {
        page: '1',
        pageSize: '10'
      }
    }
  },
  methods: {
    onSizeChange(val) {
      this.pageParams.pageSize = val
      this.$emit('change', this.pageParams)
    },
    onCurrentChange(val) {
      this.pageParams.page = val
      this.$emit('change', this.pageParams)
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
